<template>
    <div class="main-content">
        <div class="pad_20">
            <div class="concent_title">
                <span></span>
                <b>分销佣金详情</b>
                <hr style="height:3px;">
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">基础信息</h3>
                </div>
                <div class="panel-body">
                    <div class="sponsor col-xs-6"><b class="col-xs-4 text-right">楼盘:</b>{{commissionRulesDetail[0].premisesName}}</div>
                    <div class="sponsor col-xs-6"><b class="col-xs-4 text-right">分销佣金状态:</b>{{commissionRulesDetail[0].stateValue}}</div>
                    <div class="sponsor col-xs-6"><b class="col-xs-4 text-right">合作机构:</b>{{commissionRulesDetail[0].companyName}}</div>
                    <div class="sponsor col-xs-6" v-if="commissionRulesDetail[0].lostDate"><b class="col-xs-4 text-right">失效日期:</b>{{commissionRulesDetail[0].lostDate}}</div>
                </div>
            </div>

            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">分销佣金规则</h3>
                </div>
                <div class="panel-body">
                    <div class="sponsor"><b class="col-xs-2 text-right">分佣方式:</b>
                        <span v-if="commissionRulesDetail[0].commissionType==3">按阶梯-成交套数</span>
                        <span v-if="commissionRulesDetail[0].commissionType==4">按阶梯-成交总额</span>
                        <span v-if="commissionRulesDetail[0].commissionType==1">按固定-佣金</span>
                        <span v-if="commissionRulesDetail[0].commissionType==2">按固定-比例</span>
                    </div>
                    <div v-for="item in commissionRulesDetail" v-if="commissionRulesDetail[0].commissionType==3||commissionRulesDetail[0].commissionType==4">
                        <div class="sponsor" v-if="item.sort==1">
                            <b class="col-xs-2 text-right">成交{{type}}:</b>{{item.rule}}</span>&nbsp;{{unit}}以下，佣金比例 为 <span class="font_color">{{item.commissionRate}}%</span>
                        </div>
                        <div class="sponsor" v-if="item.sort==2">
                            <b class="col-xs-2 text-right">成交{{type}}:</b>{{item.rule}}</span>&nbsp;{{unit}}，佣金比例 为  <span class="font_color">{{item.commissionRate}}%</span>
                        </div>
                        <div class="sponsor" v-if="item.sort==3">
                            <b class="col-xs-2 text-right">成交{{type}}:</b>{{item.rule}}</span>&nbsp;{{unit}}以上，佣金比例 为 <span class="font_color">{{item.commissionRate}}%</span>
                        </div>
                    </div>
                    <div class="sponsor col-xs-6" v-if="commissionRulesDetail[0].commissionType==1||commissionRulesDetail[0].commissionType==2">
                        <b class="col-xs-4 text-right">佣金类型:</b>
                        <span v-if="!commissionRulesDetail[0].commissionAmmount">佣金比例 &nbsp;{{commissionRulesDetail[0].commissionRate}}%</span>
                        <span v-if="commissionRulesDetail[0].commissionAmmount">佣金金额 &nbsp;{{commissionRulesDetail[0].commissionAmmount}}元</span>
                    </div>
                </div>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">佣金结算周期</h3>
                </div>
                <div class="panel-body">
                    <div class="sponsor col-xs-6"><b class="col-xs-4 text-right">周期:</b>
                        <span v-if="commissionRulesDetail[0].settlementCycle==90&& (commissionRulesDetail[0].commissionType ==3||commissionRulesDetail[0].commissionType ==4)">季度结算(默认下一季度第一个月的10号)</span>
                        <span v-if="commissionRulesDetail[0].settlementCycle==90&& (commissionRulesDetail[0].commissionType ==1||commissionRulesDetail[0].commissionType ==2)">T+90</span>
                        <span v-if="commissionRulesDetail[0].settlementCycle==30 && (commissionRulesDetail[0].commissionType ==3||commissionRulesDetail[0].commissionType ==4)">月结算(默认每个月的10号)</span>
                        <span v-if="commissionRulesDetail[0].settlementCycle==30 && (commissionRulesDetail[0].commissionType ==1||commissionRulesDetail[0].commissionType ==2)">T+30</span>
                        <span v-if="commissionRulesDetail[0].settlementCycle==15">T+15</span>
                        <span v-if="commissionRulesDetail[0].settlementCycle==7">T+7</span>
                        <span v-if="commissionRulesDetail[0].settlementCycle==1">T+1</span>
                    </div>
                    <div class="sponsor col-xs-6"><b class="col-xs-4 text-right">生效日期:</b>{{commissionRulesDetail[0].effectDate}}</div>
                    <div class="sponsor col-xs-6"><b class="col-xs-4 text-right">开始时间:</b>{{commissionRulesDetail[0].beginDate}}</div>
                    <div class="sponsor col-xs-6"><b class="col-xs-4 text-right">结束时间:</b>{{commissionRulesDetail[0].endDate}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    .sponsor{ padding: 1em 0 1em 10px;  margin-bottom: 1em;   border-bottom: 1px dashed #eee; font-size:16px; }
</style>
<script>
    export default{
        data(){
            return{
                unit:'',
                type:'',
                commissionRulesDetail:[
                    {
                        "premisesName":"",
                        "state":"",
                        "companyName":"",
                        "lostDate":"",
                        "commissionType":"3",
                        "rule":"",
                        "commissionAmmount":"",
                        "settlementCycle":"",
                        "effectDate":""
                    }
                ]
            }
        },
        mounted:function(){
            this.getSetCommissionDetail();
        },
        methods:{
            getSetCommissionDetail(){
                var _self = this;
                var url =  _self.utilHelper.apiUrl+"/api/getCRDetail";
                var body = {};
                body.params = {'groupId':this.$route.params.id};
                _self.$http.post(url,body).then((response)=>{
                    if(response.body.result == '1'){
                        _self.commissionRulesDetail = response.body.resData.crDetail;
                        if(_self.commissionRulesDetail[0].commissionType==3){
                            _self.unit = '套';
                            _self.type = '套数';
                        }else if(_self.commissionRulesDetail[0].commissionType==4){
                            _self.unit = '元';
                            _self.type = '金额';
                        }
                    }
                })
            }
        }
    }
</script>
